<template>
    <div>axios测试</div>
    <ul class="list">
        <li v-for="item in usersList" :key="item.id">{{ item.username }}</li>
    </ul>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import type { Ref } from 'vue'
// 导入usersApi中的方法
import { getAllUsersList } from '../api/usersApi'
// 导入users相关类型
import type { userItemInterface } from '../models/usersModel'
// import type { AxiosResponse } from 'axios'

const usersList: Ref<userItemInterface[]> = ref([])

// 用户列表初始化 -- async await
// const usersListInit = async () => {
//     // AxiosResponse是原接口响应值类型经过axios包装之后的类型
//     // 泛型类中的类型就是原响应数据的类型
//     let res = await getAllUsersList('/users/query')
//     console.log(res)
//     usersList.value = res.data.data
// }

const usersListInit = ()=>{
    getAllUsersList('/users/query').then(res=>{
        usersList.value = res.data.data
    })
}

onMounted(() => {
    usersListInit()
})
</script>

<style></style>